<template>
	<view class="container">
		<!-- 考试信息卡片 -->
		<view class="exam-info-card">
			<text class="exam-title">2024-2025年上学期九年级3月第三次模考</text>
			<view class="exam-details">
				<text class="exam-detail">生成时间：2025/03/03</text>
				<text class="exam-detail">总人数：200人</text>
			</view>
			
			<!-- 科目选择 -->
			<SubjectSelector 
				:selectedSubject="selectedSubject" 
				:subjects="subjects"
				@subject-change="handleSubjectChange"
			/>
			
			<!-- 班级选择 -->
			<view class="class-selector">
				<view class="class-item active">全部</view>
				<view class="class-item">2201班</view>
				<view class="class-item">2202班</view>
				<view class="class-item">2203班</view>
				<view class="class-item">2204班</view>
			</view>
		</view>

		<!-- 选择题部分 -->
		<view class="question-section">
			<view class="section-title">选择题（共5题）</view>
			
			<view class="question-table">
				<view class="table-header">
					<text class="header-cell">题序</text>
					<text class="header-cell">班级得分率</text>
					<text class="header-cell">年级得分率</text>
					<text class="header-cell">操作</text>
				</view>
				
				<view class="table-row" v-for="i in 5" :key="i">
					<text class="table-cell">第{{ i }}题</text>
					<text class="table-cell">5%</text>
					<text class="table-cell">10%</text>
					<text class="table-cell action-cell" @click="goToAnswerDetail(i, '选择题')">作答详情 ></text>
				</view>
			</view>
		</view>

		<!-- 多选题部分 -->
		<view class="question-section">
			<view class="section-title">多选题（共5题）</view>
			
			<view class="question-table">
				<view class="table-header">
					<text class="header-cell">题序</text>
					<text class="header-cell">班级得分率</text>
					<text class="header-cell">年级得分率</text>
					<text class="header-cell">操作</text>
				</view>
				
				<view class="table-row" v-for="i in 5" :key="i + 5">
					<text class="table-cell">第{{ i }}题</text>
					<text class="table-cell">5%</text>
					<text class="table-cell">10%</text>
					<text class="table-cell action-cell" @click="goToAnswerDetail(i, '多选题')">作答详情 ></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import SubjectSelector from '@/components/SubjectSelector.vue';

export default {
	components: {
		SubjectSelector
	},
	data() {
		return {
			examInfo: {},
			selectedSubject: '全科',
			subjects: [
				{ id: 1, name: '全科', icon: '🔲', color: 'cyan' },
				{ id: 2, name: '语文', icon: '📖', color: 'orange' },
				{ id: 3, name: '英文', icon: '📚', color: 'yellow' },
				{ id: 4, name: '数学', icon: '🔢', color: 'purple' },
				{ id: 5, name: '政治', icon: '⭐', color: 'red' },
				{ id: 6, name: '地理', icon: '🌍', color: 'blue' },
				{ id: 7, name: '历史', icon: '🏛️', color: 'brown' },
				{ id: 8, name: '化学', icon: '⚡', color: 'light-blue' },
				{ id: 9, name: '物理', icon: '🧪', color: 'teal' },
				{ id: 10, name: '生物', icon: '🧬', color: 'green' }
			]
		}
	},
	onLoad(options) {
		// 接收传递的参数
		if (options.subject) {
			this.selectedSubject = decodeURIComponent(options.subject);
		}
		if (options.type) {
			console.log('讲评类型:', decodeURIComponent(options.type));
		}
	},
	methods: {
		goToAnswerDetail(questionNumber, questionType) {
			uni.navigateTo({
				url: `/pages/answer-detail/answer-detail?questionNumber=${questionNumber}&questionType=${encodeURIComponent(questionType)}&subject=${encodeURIComponent(this.selectedSubject)}`
			});
		},
		handleSubjectChange(subject) {
			console.log('科目切换:', subject);
			this.selectedSubject = subject.name;
			// 这里可以根据选中的科目重新加载题目数据
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@white: #fff;
@border-color: #f0f0f0;

.container {
	min-height: 100vh;
	background: linear-gradient(135deg, @primary-color 0%, @secondary-color 100%);
	padding: 20rpx;
}

// 考试信息卡片
.exam-info-card {
	background: @white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.exam-title {
		font-size: 32rpx;
		font-weight: bold;
		color: @text-color;
		margin-bottom: 16rpx;
		display: block;
	}

	.exam-details {
		display: flex;
		gap: 40rpx;
		margin-bottom: 24rpx;

		.exam-detail {
			font-size: 24rpx;
			color: @text-light;
		}
	}

	// 科目选择器样式已移至SubjectSelector组件中

	// 班级选择器
	.class-selector {
		display: flex;
		gap: 16rpx;

		.class-item {
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			font-size: 22rpx;
			color: @text-light;
			border: 1rpx solid #e0e0e0;
			background: #f8f8f8;

			&.active {
				background: @primary-color;
				color: @white;
				border-color: @primary-color;
			}
		}
	}
}

// 题目部分
.question-section {
	background: @white;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: @text-color;
		padding: 20rpx 24rpx;
		background: #f8f9fa;
		border-bottom: 1rpx solid #e9ecef;
	}

	.question-table {
		width: 100%;

		.table-header {
			display: flex;
			background: #f1f3f4;
			padding: 16rpx 0;
			border-bottom: 1rpx solid #e0e0e0;

			.header-cell {
				flex: 1;
				text-align: center;
				font-size: 24rpx;
				font-weight: bold;
				color: @text-light;
			}
		}

		.table-row {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1rpx solid @border-color;

			&:last-child {
				border-bottom: none;
			}

			.table-cell {
				flex: 1;
				text-align: center;
				font-size: 26rpx;
				color: @text-color;

				&.action-cell {
					color: @primary-color;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
